<template>
    <div>
        <div class="absolutePosition modal-container" :style="styleObj">

            <el-row>

                <el-col id="menuDiv" :span="colSpanMenu"
                        class="subContent subContentRightBorder" :style="contentStyle">
                    <el-menu
                            :default-active="defaultUrl"
                            :active="defaultUrl"
                            class="el-menu-scoped"
                            @select="handSelect"
                            active-text-color="rgba(151,230,255,1)"
                            router>

                        <span v-for="(menuLvOne,indexLvOne) in menuList" :key="indexLvOne">
                            <!-- 对于没有子节点的，就直接点击跳转自己的页面 -->
                            <el-menu-item :index="menuLvOne.meta.name"
                                          :key="indexLvOne" v-if="!menuLvOne.children">
                                {{$t('common.menu.'+menuLvOne.meta.name)}}
                            </el-menu-item>
                            <!-- 对于有子节点的，就击跳转子节点的页面 -->
                            <el-submenu :index="menuLvOne.meta.name"
                                        :key="indexLvOne" v-if="menuLvOne.children">
                                <template slot="title">
                                    <span slot="title">{{$t('common.menu.'+menuLvOne.meta.name)}}</span>
                                </template>

                                <el-menu-item :index="menu.meta.name"
                                              v-for="(menu,index) in getSubMenuList(menuLvOne.meta.name)"
                                              :key="index"> {{$t('common.menu.'+menu.meta.name)}}
                                </el-menu-item>

                            </el-submenu>
                        </span>

                        <!--<el-submenu :index="menuLvOne.meta.name"-->
                                    <!--v-for="(menuLvOne,indexLvOne) in menuList"-->
                                    <!--:key="indexLvOne">-->
                            <!--<template slot="title">-->
                                <!--<span slot="title">{{$t('common.menu.'+menuLvOne.meta.name)}}</span>-->
                            <!--</template>-->

                            <!--<el-menu-item :index="menu.meta.name"-->
                                          <!--v-for="(menu,index) in getSubMenuList(menuLvOne.meta.name)"-->
                                          <!--:key="index"> {{$t('common.menu.'+menu.meta.name)}}-->
                            <!--</el-menu-item>-->

                        <!--</el-submenu>-->

                    </el-menu>
                </el-col>


                <el-col id="loadPageDiv" :span="colSpanContent" class="subContent" :style="contentStyle">
                    <el-row>
                        <!-- 顶部面包屑 -->
                        <el-col :span="24">
                            <div class="dialog_header_title" id="dialogHeaderTitle" ref="dialogHeaderTitle">
                                <span class="titleSpanPrefix">&nbsp;█</span>
                                <span class="titleSpanTitle">{{title}}</span>
                            </div>
                        </el-col>
                        <!-- 页面实际内容位置 -->
                        <el-col :span="24">
                            <div>
                                <keep-alive>
                                    <router-view :key="index"></router-view>
                                </keep-alive>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>

            </el-row>

        </div>

    </div>

</template>

<script>
  import {resetContentModal} from '@/api/resetSize'

  import {mapsMap, menuRouterMap} from '@/resource/menu/menu'

  export default {
    name: "AppMain",

    created: function () {
      this.init();
    },
    watch: {
      $route: {
        //监听路由变化
        handler: function (val, oldVal) {
          this.changeTitle();
          this.defaultUrl = val.meta.name;
        }
      }
    },
    data() {
      return {
        colSpanContent: 20,//页面内容的col大小（分24等份）
        colSpanMenu: 4,//页面二级菜单的col大小（分24等份）

        menuList: [],

        subMenuList: [],
        defaultUrl: this.$route.meta.name,
        dialogTableVisible: true,
        styleObj: {
          width: 0,
          top: 0,
          height: 0,
          left: 0
        },
        contentStyle: {
          height: 0
        },
        title: '',

        headerHeight: 100
      };
    },
    methods: {
      resetSize: function () {
        let fullWidth = document.documentElement.clientWidth >= this.$store.getters.mixWidth ? document.documentElement.clientWidth : this.$store.getters.mixWidth;
        let fullHeight = document.documentElement.clientHeight >= this.$store.getters.mixHeight ? document.documentElement.clientHeight : this.$store.getters.mixHeight;

        // 设置正文部分的定位
        resetContentModal(this.styleObj, fullWidth, fullHeight, this.headerHeight);

        this.contentStyle.height = this.styleObj.height;
      },
      init: function () {
        // 初始化方法，设置界面大小
        this.resetSize();
        this.changeTitle();
        this.menuList = menuRouterMap;
      },
      changeTitle: function () {
        const name = this.$route.meta.name;
        const parentName = this.$route.meta.parent;
        this.title = parentName === '' ? '' : this.$t('common.menu.' + parentName) + '   >>   ';
        this.title = this.title + this.$t('common.menu.' + name);
      },
      getSubMenuList: function (name) {
        var tempList = this.getSubMenuArrData(name);

        if (!tempList) {
          return;
        }

        var subMenuList = [];

        for (var k = 0; k < tempList.length; k++) {
          subMenuList.push(tempList[k]);
        }

        return subMenuList;
      },
      getSubMenuArrData(name) {
        switch (name) {
          case 'Maps':
            return mapsMap;

          default:
            return null;
        }
      },
      handSelect(key, keyPath) {
        let vue = this;
        if (key) {
          // vue.$router.push(key);
          let path = '/' + key;
          vue.$router.push({path: path, query: {t: new Date().getTime()}});
        } else {
          vue.$router.push('404');
        }
      }
    },
    computed: {
      index() {
        return this.$route.path
      }
    },
    mounted() {
      const that = this;

      setInterval(function () {
        that.resetSize();
      }, 500)
    }
  };
</script>

<style scoped>
    .absolutePosition {
        position: absolute;
    }

    .dialog_header_title {
        padding: 10px;
    }
</style>
